<!-- @format -->

<template>
  <div class="upload-example">
    <h2 class="example-title">上传组件示例</h2>

    <!-- 基础用法 -->
    <div class="example-section">
      <h3 class="section-title">基础用法</h3>
      <comp-upload
        v-model="fileList1"
        action="https://api.example.com/upload"
        @change="handleChange"
        @success="handleSuccess"
        @error="handleError"
      />
    </div>

    <!-- 多文件上传 -->
    <div class="example-section">
      <h3 class="section-title">多文件上传</h3>
      <comp-upload
        v-model="fileList2"
        action="https://api.example.com/upload"
        :multiple="true"
        :limit="5"
        @exceed="handleExceed"
      />
    </div>

    <!-- 手动上传 -->
    <div class="example-section">
      <h3 class="section-title">手动上传</h3>
      <comp-upload
        ref="manualUploadRef"
        v-model="fileList3"
        action="https://api.example.com/upload"
        :auto-upload="false"
      />
      <div class="button-group">
        <button class="submit-button" @click="submitUpload">开始上传</button>
        <button class="clear-button" @click="clearFiles">清空文件</button>
      </div>
    </div>

    <!-- 自定义上传按钮 -->
    <div class="example-section">
      <h3 class="section-title">自定义上传按钮</h3>
      <comp-upload v-model="fileList4" action="https://api.example.com/upload">
        <template #upload-button>
          <div class="custom-upload-button">
            <span class="custom-icon">📁</span>
            <span class="custom-text">点击选择文件</span>
          </div>
        </template>
      </comp-upload>
    </div>

    <!-- 图片上传 -->
    <div class="example-section">
      <h3 class="section-title">图片上传</h3>
      <comp-upload
        v-model="fileList5"
        action="https://api.example.com/upload"
        accept="image/*"
        :max-size="2 * 1024 * 1024"
        button-text="上传图片"
      />
    </div>

    <!-- Base64上传 -->
    <div class="example-section">
      <h3 class="section-title">Base64上传</h3>
      <comp-upload
        v-model="fileList6"
        action="https://api.example.com/upload"
        accept="image/*"
        upload-method="base64"
        button-text="Base64上传"
      />
    </div>

    <!-- 禁用状态 -->
    <div class="example-section">
      <h3 class="section-title">禁用状态</h3>
      <comp-upload
        v-model="fileList7"
        action="https://api.example.com/upload"
        :disabled="true"
        button-text="禁用上传"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompUpload from './Index.vue';

  // 文件列表
  const fileList1 = ref([]);
  const fileList2 = ref([]);
  const fileList3 = ref([]);
  const fileList4 = ref([]);
  const fileList5 = ref([]);
  const fileList6 = ref([]);
  const fileList7 = ref([]);

  // 手动上传引用
  const manualUploadRef = ref();

  // 处理文件状态变化
  const handleChange = (file: any, fileList: any) => {
    console.log('文件状态变化', file, fileList);
  };

  // 处理上传成功
  const handleSuccess = (response: any, file: any, fileList: any) => {
    console.log('上传成功', response, file);
    uni.showToast({
      title: '上传成功',
      icon: 'success',
    });
  };

  // 处理上传失败
  const handleError = (error: any, file: any, fileList: any) => {
    console.error('上传失败', error, file);
    uni.showToast({
      title: '上传失败',
      icon: 'error',
    });
  };

  // 处理超出文件数量限制
  const handleExceed = (files: any, fileList: any) => {
    uni.showToast({
      title: `最多只能上传5个文件，当前已有${fileList.length}个文件`,
      icon: 'none',
    });
  };

  // 手动上传文件
  const submitUpload = () => {
    manualUploadRef.value.submitUpload();
  };

  // 清空文件列表
  const clearFiles = () => {
    manualUploadRef.value.clearFiles();
  };
</script>

<style lang="scss" scoped>
  .upload-example {
    padding: 20px;

    .example-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #303133;
    }

    .example-section {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 4px;

      .section-title {
        font-size: 16px;
        margin-bottom: 15px;
        color: #606266;
      }
    }

    .button-group {
      margin-top: 10px;
      display: flex;
      gap: 10px;
    }

    .submit-button,
    .clear-button {
      padding: 8px 15px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }

    .submit-button {
      background-color: #1989fa;
      color: #fff;

      &:hover {
        background-color: #0d7bea;
      }
    }

    .clear-button {
      background-color: #f56c6c;
      color: #fff;

      &:hover {
        background-color: #e64242;
      }
    }

    .custom-upload-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 120px;
      border: 2px dashed #1989fa;
      border-radius: 8px;
      background-color: #ecf5ff;

      .custom-icon {
        font-size: 32px;
        margin-bottom: 8px;
      }

      .custom-text {
        font-size: 14px;
        color: #1989fa;
      }
    }
  }
</style>
